// Sass混入定义
@use 'variables' as *;
@use 'sass:color';
@use 'sass:math';

// 响应式断点混入
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (min-width: $breakpoint-xs) {
      @content;
    }
  }
  @if $breakpoint == sm {
    @media (min-width: $breakpoint-sm) {
      @content;
    }
  }
  @if $breakpoint == md {
    @media (min-width: $breakpoint-md) {
      @content;
    }
  }
  @if $breakpoint == lg {
    @media (min-width: $breakpoint-lg) {
      @content;
    }
  }
  @if $breakpoint == xl {
    @media (min-width: $breakpoint-xl) {
      @content;
    }
  }
  @if $breakpoint == 2xl {
    @media (min-width: $breakpoint-2xl) {
      @content;
    }
  }
}

// 响应式字体大小混入
@mixin responsive-font-size($xs, $sm: null, $md: null, $lg: null, $xl: null) {
  font-size: $xs;

  @if $sm {
    @include respond-to(sm) {
      font-size: $sm;
    }
  }

  @if $md {
    @include respond-to(md) {
      font-size: $md;
    }
  }

  @if $lg {
    @include respond-to(lg) {
      font-size: $lg;
    }
  }

  @if $xl {
    @include respond-to(xl) {
      font-size: $xl;
    }
  }
}

// 响应式间距混入
@mixin responsive-spacing($property, $xs, $sm: null, $md: null, $lg: null, $xl: null) {
  #{$property}: $xs;

  @if $sm {
    @include respond-to(sm) {
      #{$property}: $sm;
    }
  }

  @if $md {
    @include respond-to(md) {
      #{$property}: $md;
    }
  }

  @if $lg {
    @include respond-to(lg) {
      #{$property}: $lg;
    }
  }

  @if $xl {
    @include respond-to(xl) {
      #{$property}: $xl;
    }
  }
}

// 响应式容器混入
@mixin responsive-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 $spacing-md;

  @include respond-to(sm) {
    max-width: $container-sm;
    padding: 0 $spacing-lg;
  }

  @include respond-to(md) {
    max-width: $container-md;
    padding: 0 $spacing-xl;
  }

  @include respond-to(lg) {
    max-width: $container-lg;
    padding: 0 $spacing-2xl;
  }

  @include respond-to(xl) {
    max-width: $container-xl;
  }

  @include respond-to(2xl) {
    max-width: $container-2xl;
  }
}

// 响应式网格混入
@mixin responsive-grid($xs: 1, $sm: null, $md: null, $lg: null, $xl: null) {
  display: grid;
  grid-template-columns: repeat($xs, 1fr);
  gap: $spacing-md;

  @if $sm {
    @include respond-to(sm) {
      grid-template-columns: repeat($sm, 1fr);
    }
  }

  @if $md {
    @include respond-to(md) {
      grid-template-columns: repeat($md, 1fr);
    }
  }

  @if $lg {
    @include respond-to(lg) {
      grid-template-columns: repeat($lg, 1fr);
    }
  }

  @if $xl {
    @include respond-to(xl) {
      grid-template-columns: repeat($xl, 1fr);
    }
  }
}

// 响应式隐藏/显示混入
@mixin responsive-hide($breakpoint) {
  @include respond-to($breakpoint) {
    display: none;
  }
}

@mixin responsive-show($breakpoint) {
  display: none;

  @include respond-to($breakpoint) {
    display: block;
  }
}

// 按钮样式混入
@mixin button-style($bg-color, $text-color, $hover-bg: null) {
  background-color: $bg-color;
  color: $text-color;
  padding: $spacing-sm $spacing-lg;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: $hover-bg or color.adjust($bg-color, $lightness: -10%);
    transform: translateY(-2px);
    box-shadow: $shadow-md;
  }

  &:active {
    transform: translateY(0);
  }
}

// 卡片样式混入
@mixin card-style($bg-color: $card-bg-color, $padding: $spacing-lg) {
  background-color: $bg-color;
  padding: $padding;
  // border-radius: 0.5rem;
  // box-shadow: $shadow-md;
  // border: 1px solid rgba(255, 255, 255, 0.1);

  // &:hover {
  //   box-shadow: $shadow-lg;
  //   transform: translateY(-2px);
  // }
}

// 文本截断混入
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本截断混入
@mixin text-truncate-lines($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// Flexbox居中混入
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 绝对定位居中混入
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 渐变背景混入
@mixin gradient-bg($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 动画混入
@mixin fade-in($duration: 0.3s, $delay: 0s) {
  animation: fadeIn $duration ease-in-out $delay;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@function px-to-vw($px, $design-width: 1920) {
  // @return ($px / $design-width) * 100vw;
  @return math.div($px, $design-width) * 100vw;
}
